<template>
  <div class="pay-list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
          <span class="search-label search-label-w1">订单编号:</span>
          <Input v-model="searchParam.orderCode" placeholder="请输入"/>
          </Col>
          <!-- <Col class="search-item">
          <span class="search-label">门店名称:</span>
          <Select v-model="searchParam.shopId" @on-change="doSearch" filterable class="select-shop-item">
            <Option v-for="item in shopListData" :value="item.shopId" :key="item.shopId">{{ item.shopName }}</Option>
          </Select>
          </Col> -->
          <Col class="search-item">
            <span class="search-label"
              style="line-height:36px;display:inline-block;vertical-align: top;
  ">门店名称：</span>
            <div style="display:inline-block">
              <vueTreeselectChoice
                ref="vueTreeselectChoice"
                @input="handleShop"
                :disable-branch-nodes="true"
                @on-api-finish="apiFinish"
                permissionCode="moms:pay:viewpayrecords"
                v-model="searchParam.shopId"></vueTreeselectChoice>
            </div>
          </Col>
          <Col class="search-item">
          <span class="search-label">支付方式:</span>
          <Select v-model="payCode" @on-change="doSearch">
            <Option v-for="item in selectPayCode" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <Button class="search-btn" type="primary" @click="searchAll">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn" @click="resetParam">重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
          <Button v-if="exampleShow" @click="exampleOpen">收起筛选
            <Icon type="ios-arrow-down" />
          </Button>
          <Button v-else @click="exampleOpen">更多筛选
            <Icon type="ios-arrow-up" />
          </Button>
          </Col>
        </Row>
      </Row>
      <div class="search-example" v-show="exampleShow">
        <Row type="flex">
          <Col class="search-item">
          <span class="search-label">支付渠道:</span>
          <Select v-model="payFlatform" @on-change="doSearch">
            <Option v-for="item in selectPayFlatform" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <span class="search-label">支付状态:</span>
          <Select v-model="payStatus" @on-change="doSearch">
            <Option v-for="item in selectPayStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col>
          <!-- <Col class="search-item">
          <span class="search-label">支付类型:</span>
          <Select v-model="payMethod" @on-change="doSearch">
            <Option v-for="item in selectPayType" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          </Col> -->
          <!-- <Col class="search-item">
       <span class="search-label search-label-w1">商户ID:</span>
         <Input v-model="searchParam.merchantId" placeholder="请输入"/>
      </Col> -->
          <!-- <Col class="search-item">
          <span class="search-label search-label-w1">公众号ID:</span>
          <Input v-model="searchParam.partnerSign" placeholder="请输入" @on-keyup='filterSpace' />
          </Col> -->
          <!-- <Col class="search-item">
      <span class="search-label search-label-w1">门店ID:</span>
        <Input v-model="searchParam.shopId" placeholder="请输入"/>
      </Col> -->
          <Col class="search-item">
          <span class="search-label">支付发起时间:</span>
          <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :editable="false" class="data-time-style" style="width:280px;" :value="payStartTime" @on-change="selectStartTime" :options="optionsStartTime" @on-clear="clearStartTime" placement="bottom">
          </DatePicker>
          </Col>
          <!-- <Col class="search-item">
          <span class="search-label">支付完成时间:</span>
          <DatePicker type="datetimerange" format="yyyy-MM-dd HH:mm:ss" :editable="false" class="data-time-style" style="width:280px;" :value="payEndTime" @on-change="selectEndTime" :options="optionsEndTime" @on-clear="clearEndTime" placement="bottom">
          </DatePicker>
          </Col> -->
        </Row>
      </div>
    </div>
    <Table class="table-list" :height="this.tableHeight" stripe :loading='loading' :columns="columns" :data="data">
      <!-- 支付方式 -->
      <template slot-scope="{ row }" slot="payCode">
        <span>{{ row.payCode==="ALIPAY"?"支付宝支付":row.payCode==="WEIXIN"?"微信支付":row.payCode==="CASH"?"现金支付":row.payCode==="UNION"?"银联支付":row.payCode==="TRANSFER_TO_PUBLIC_ACCOUNT"?"对公转账":row.payCode==="INTEGRAL"?"积分":row.payCode==="TICKET"?"彩票":row.payCode==="CURRENCY"?"游戏币":"" }}</span>
      </template>
      <!-- 支付状态 -->
      <!-- <template slot-scope="{ row }" slot="payStatus">
        <span>{{ row.payStatus==="0"?"付款中":row.payStatus==="1"?"付款成功":row.payStatus==="2"?"付款失败":row.payStatus==="3"?"已取消":row.payStatus==="4"?"已退款":row.payStatus==="5"?"异常":"" }}</span>
      </template> -->
      <template slot-scope="{ row }" slot="payStatus">
        <span>{{ row.payStatus==="0"?"付款中":row.payStatus==="1"?"付款成功":row.payStatus==="6"?"付款失败":row.payStatus==="3"?"已取消":row.payStatus==="4"?"已退款":row.payStatus==="5"?"异常":row.payStatus==="2"?"未付款":''}}</span>
      </template>
      <!-- 支付渠道 -->
      <template slot-scope="{ row }" slot="payPlatform">
        <span>{{ row.payPlatform==="WECHAT_MALL"?"微信商城":row.payPlatform==="ALL_IN_ONE_MACHINE"?"一体机":row.payPlatform==="SWIPE_MACHINE"?"刷卡器":row.payPlatform==="BOSS_ORDER"?"BOSS前台":row.payPlatform==="TEAM_BUY_KOUBEI"?"口碑":row.payPlatform==="MEI_TUAN"?"新美大(美团点评)":"" }}</span>
      </template>
      <!-- 支付类型 -->
      <template slot-scope="{ row }" slot="payMethod">
        <span>{{ row.payMethod==="AUTH_CODE_PAY"?"扫码枪":row.payMethod==="QR_CODE_PAY"?"主动扫码":row.payMethod==="WAP_PAY"?"公众号":row.payMethod==="UNION_PAY" || row.payMethod==="POS"?"银联刷卡":row.payMethod==="APPLET_PAY"?"小程序":row.payMethod==="CASH_PAY"?"现金":row.payMethod==="APP_PAY"?"app":row.payMethod==="TRANSFER_TO_PUBLIC_ACCOUNT_PAY"?"对公转账":"" }}</span>
      </template>
      <!-- 支付金额 -->
      <template slot-scope="{ row }" slot="payPrice">
        <span>{{ row.payPrice?row.payPrice:"0.00" }}</span>
      </template>
      <!-- 手续费 -->
      <template slot-scope="{ row }" slot="amountFee">
        <span>{{ row.amountFee?row.amountFee:"0.00" }}</span>
      </template>

    </Table>
    <div class="page-box">
      <Page :total="total" :current="pageIndex" :page-size="pageSize" @on-page-size-change="selectPageNum" @on-change="selectPageIndex" ref="pages" show-total show-sizer />
    </div>
  </div>
</template>
<script>
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
import { paymentQuery } from '@/api/pay/index'
// import { getShopList } from '@/api/system/store'
import { formatDate } from '@/libs/tools'
export default {
  name: 'payment_pay_list',
  components: { vueTreeselectChoice },
  data () {
    return {
      partnerSign: '',
      createTimeBegin: '',
      createTimeEnd: '',
      finishTimeBegin: '',
      finishTimeEnd: '',
      loading: true,
      loading1: false,
      exampleShow: true,
      data: [], // 支付记录列表
      shopListData: [], // 门店列表
      total: 0,
      tableHeight: 0,
      payCode: '-1', // 支付方式
      payStatus: '-1', // 支付状态
      payFlatform: '-1', // 支付渠道
      payMethod: '-1', // 支付类型
      payStartTime: [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ],
      payEndTime: [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ],
      orderCode: '',
      searchParam: {
        orderCode: '', // 订单编号
        merchantId: this.$store.state.user.merchantId, // 商户ID
        partnerSign: '', // 公众号ID
        shopId: null, // 门店ID
        createTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ), // 支付发起时间开始
        createTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'), // 支付发起时间结束
        finishTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ), // 支付完成时间开始
        finishTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss') // 支付完成时间结束
      },
      pageIndex: 1,
      pageSize: 10,
      optionsEndTime: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      optionsStartTime: {},
      selectPayCode: [
        { value: '-1', label: '全部' },
        { value: 'WEIXIN', label: '微信支付' },
        { value: 'ALIPAY', label: '支付宝支付' },
        { value: 'UNION', label: '银联支付' },
        { value: 'CASH', label: '现金支付' },
        { value: 'TRANSFER_TO_PUBLIC_ACCOUNT', label: '对公转账' }
      ], // 支付方式
      selectPayStatus: [
        // { value: '-1', label: '全部' },
        // { value: '0', label: '付款中' },
        // { value: '1', label: '付款成功' },
        // { value: '2', label: '付款失败' },
        // { value: '3', label: '已取消' },
        // { value: '5', label: '异常' }
        { value: '-1', label: '全部' },
        { value: '0', label: '付款中' },
        { value: '1', label: '付款成功' },
        { value: '2', label: '付款失败' },
        { value: '3', label: '已取消' },
        { value: '4', label: '已退款' },
        { value: '5', label: '异常' },
        { value: '6', label: '未付款' }
      ], // 支付状态
      selectPayFlatform: [
        { value: '-1', label: '全部' },
        { value: 'WECHAT_MALL', label: '微信商城' },
        { value: 'ALL_IN_ONE_MACHINE', label: '一体机' },
        { value: 'SWIPE_MACHINE', label: '刷卡器' },
        { value: 'BOSS_ORDER', label: 'BOSS前台' },
        { value: '接口未提供', label: 'APP' }
      ], // 支付渠道
      selectPayType: [
        { value: '-1', label: '全部' },
        { value: 'AUTH_CODE_PAY', label: '扫码枪' },
        { value: 'QR_CODE_PAY', label: '主动扫码' },
        { value: 'WAP_PAY', label: '公众号' },
        { value: 'UNION_PAY', label: '银联刷卡' },
        { value: 'APPLET_PAY', label: '小程序' },
        { value: 'CASH_PAY', label: '现金' },
        { value: 'APP_PAY', label: 'app' },
        { value: 'TRANSFER_TO_PUBLIC_ACCOUNT_PAY', label: '对公转账' }
      ], // 支付类型
      columns: [
        { title: '支付流水号', key: 'paymentSerialNo', width: 180, fixed: 'left' },
        { title: '第三方支付流水号', key: 'thirdSerialNo', width: 300 },
        { title: '订单编号', key: 'orderId', width: 200 },
        { title: '门店名称', key: 'shopName', width: 200 },
        { title: '顾客姓名', key: 'memberName', width: 200 },
        // { title: '订单ID', key: 'orderId', width: 200 },
        // { title: '用户ID', key: 'memberId', width: 200 },
        // { title: '商户ID', key: 'merchantId', width: 300 },
        // { title: '门店ID', key: 'shopId', width: 300 },
        // { title: '公众号ID', key: 'partnerSign', width: 300 },
        { title: '支付方式', slot: 'payCode', width: 120 },
        { title: '支付类型', slot: 'payMethod', width: 120 },
        { title: '支付渠道', slot: 'payPlatform', width: 120 },
        { title: '支付金额(元)', slot: 'payPrice', width: 120 },
        // { title: '费率(%)', key: 'rateFee', width: 120 },
        { title: '手续费(元)', slot: 'amountFee', width: 120 },
        { title: '支付状态', slot: 'payStatus', width: 120 },
        { title: '支付发起时间', key: 'createTime', width: 160 },
        { title: '支付完成时间', key: 'finishTime', width: 160 },
        { title: '备注', key: 'remark', width: 220 }
      ]
    }
  },
  methods: {
    filterSpace () {
      this.searchParam.partnerSign = this.searchParam.partnerSign.replace(
        /\s+/g,
        ''
      )
    },
    // 筛选按钮
    exampleOpen () {
      this.exampleShow = !this.exampleShow
    },
    async handleShop () {
      // const ids = await this.$refs.vueTreeselectChoice.getShopId()
      // this.searchParam.shopId = ids
      this.doSearch()
    },
    apiFinish () {
      this.doSearch()
    },
    searchAll () {
      // if (this.searchParam.shopId !== '') {
      this.orderCode = this.searchParam.orderCode
      this.createTimeBegin = this.searchParam.createTimeBegin
      this.createTimeEnd = this.searchParam.createTimeEnd
      this.finishTimeBegin = this.searchParam.finishTimeBegin
      this.finishTimeEnd = this.searchParam.finishTimeEnd
      this.partnerSign = this.searchParam.partnerSign
      this.pageIndex = 1
      this.pageSize = 10
      this.searchList()
      // } else {
      //   this.data = []
      //   this.total = 0
      //   this.tableHeight = 0
      //   this.$Message.error(`请选择门店！`)
      // }
    },
    // 重置
    resetParam () {
      this.orderCode = '' // 订单编号
      this.total = 0
      this.payCode = '-1' // 支付方式
      this.payStatus = '-1' // 支付状态
      this.payFlatform = '-1' // 支付渠道
      this.payMethod = '-1' // 支付类型
      this.searchParam = {
        merchantId: this.$store.state.user.merchantId, // 商户ID
        partnerSign: '', // 公众号ID
        shopId: null, // 门店ID
        createTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ), // 支付发起时间开始
        createTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'), // 支付发起时间结束
        finishTimeBegin: formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ), // 支付完成时间开始
        finishTimeEnd: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss') // 支付完成时间结束
      }
      this.createTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
      this.createTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      this.finishTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
      this.finishTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      this.pageIndex = 1
      this.pageSize = 10
      this.payStartTime = [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ]
      this.payEndTime = [
        formatDate(
          new Date(new Date().getTime() - 86400000 * 7),
          'yyyy-MM-dd hh:mm:ss'
        ),
        formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      ]
      this.optionsEndTime = {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      }
      this.optionsStartTime = {}
      // this.searchParam.shopId = this.shopListData[0].shopId
      this.doSearch()
    },
    // 支付记录列表
    searchList () {
      this.tableHeight = 0
      // if (this.searchParam.shopId !== '') {
      this.loading = true
      paymentQuery({
        orderCode: this.orderCode, // 订单编号
        // ...this.searchParam,
        merchantId: this.$store.state.user.merchantId,
        // partnerSign: this.partnerSign,
        shopId: this.searchParam.shopId,
        createTimeBegin: this.createTimeBegin,
        createTimeEnd: this.createTimeEnd,
        // finishTimeBegin: this.finishTimeBegin,
        // finishTimeEnd: this.finishTimeEnd,
        payCode: this.payCode === '-1' ? '' : this.payCode, // 支付方式
        payStatus: this.payStatus === '-1' ? '' : this.payStatus, // 支付状态
        payFlatform: this.payFlatform === '-1' ? '' : this.payFlatform, // 支付渠道
        // payMethod: this.payMethod === '-1' ? '' : this.payMethod, // 支付类型
        offset: (this.pageIndex - 1) * this.pageSize, // 分页OFFSET
        limit: this.pageSize // 分页大小
      })
        .then(res => {
          if (res.data.status === 200) {
            if (res.data.data !== null) {
              this.loading = false
              this.data = res.data.data
              this.total = res.data.totalCount
              if (res.data.data && res.data.data.length >= 10) {
                this.tableHeight = 537
              }
            } else {
              this.loading = false
              this.data = []
              this.total = 0
            }
          } else {
            this.loading = false
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(err => {
          this.loading = false
          this.$Message.error(`${err}`)
        })
      // }
    },
    // 门店列表
    getShopListData () {
      // this.loading = true
      // this.tableHeight = 0
      // getShopList({
      //   permissionCode: 'moms:pay:viewpayrecords', // 查看支付记录
      //   merchantId: this.$store.state.user.merchantId,
      //   offset: 0,
      //   limit: 9999
      // })
      //   .then(res => {
      //     if (res.data.status === 200) {
      //       if (res.data.totalCount > 0) {
      //         this.shopListData = res.data.data
      //         this.searchParam.shopId = res.data.data[0].shopId
      //         this.searchList() // 支付记录列表
      //       } else {
      //         this.shopListData = []
      //         this.loading = false
      //       }
      //     } else {
      //       this.$Message.error(`${res.data.error}`)
      //       this.loading = false
      //     }
      //   })
      //   .catch(err => {
      //     this.$Message.error(`${err}`)
      //     this.loading = false
      //   })
    },
    selectPageNum (num) {
      this.pageSize = num
      this.pageIndex = 1
      this.searchList()
    },
    selectPageIndex (val) {
      this.pageIndex = val
      this.searchList()
    },
    // 查询按钮
    doSearch () {
      // if (this.searchParam.shopId !== '') {
      this.pageIndex = 1
      this.pageSize = 10
      this.searchList()
      // } else {
      //   this.data = []
      //   this.total = 0
      //   this.tableHeight = 0
      //   this.$Message.error(`请选择门店！`)
      // }
    },
    // 选择开始时间
    selectStartTime (val) {
      this.searchParam.createTimeBegin = val[0] // 支付发起时间开始
      this.searchParam.createTimeEnd = val[1] // 支付发起时间结束
      this.optionsEndTime = {
        disabledDate (date) {
          return date < new Date(val[0])
        }
      }
    },
    // 选择结束时间
    selectEndTime (val) {
      this.searchParam.finishTimeBegin = val[0] // 支付完成时间开始
      this.searchParam.finishTimeEnd = val[1] // 支付完成时间结束
      this.optionsStartTime = {
        disabledDate (startTime) {
          return startTime > new Date(val[1])
        }
      }
    },

    // 清空开始时间
    clearStartTime () {
      this.searchParam.createTimeBegin = '' // 支付发起时间开始
      this.searchParam.createTimeEnd = '' // 支付发起时间结束
      this.optionsEndTime = {}
      this.optionsStartTime = {}
    },
    // 清空结束时间
    clearEndTime (val) {
      this.searchParam.finishTimeBegin = '' // 支付完成时间开始
      this.searchParam.finishTimeEnd = '' // 支付完成时间结束
    }
  },
  mounted () {
    this.createTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
    this.createTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    this.finishTimeBegin = formatDate(new Date(new Date().getTime() - 86400000 * 7), 'yyyy-MM-dd hh:mm:ss')
    this.finishTimeEnd = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
    // this.getShopListData() // 门店列表
  }
}
</script>
<style lang="less">
.pay-list {
  .search-box {
    padding-top: 0;
  }
  .search-item,
  .search-item-btn {
    padding-top: 24px;
  }
  .data-time-style {
    .ivu-input-wrapper {
      width: 280px;
    }
  }
  .ivu-table-tip {
    span {
      position: absolute;
      width: 100px;
      left: 50%;
      margin-left: -50px;
    }
  }
  .select-shop-item .ivu-select-dropdown {
    width: 300px;
  }
  .select-shop-item .ivu-select-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
